import React, { PureComponent } from 'react';
import Link from 'umi/link';
import RightContent from '../GlobalHeader/RightContent';
import BaseMenu from '../SiderMenu/BaseMenu';
import { Menu, Icon } from 'antd';
import ConfigMenu from '../../../config/menuRouter.config.js';
import styles from './index.less';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

// 引入iconfont.cn图标组
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1014732_9018yp84kxt.js',
});

export default class TopNavHeader extends PureComponent {
  state = {
    maxWidth: undefined,
  };

  static getDerivedStateFromProps(props) {
    return {
      maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 280 - 165 - 40,
    };
  }

  render() {
    const { theme, contentWidth, logo } = this.props;
    const { maxWidth } = this.state;
    return (
      <div className={styles.gdHeader}>
        <div className={styles.gdHeaderTop}>
          <div className={styles.gdLogo}>
            {/* <img src={logo} /> */}
            <span className={styles.LogoText}>
              {JSON.parse(sessionStorage.getItem('LOGIN_INFO'))
                ? JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_name
                : ''}
              [
              {JSON.parse(sessionStorage.getItem('LOGIN_INFO'))
                ? JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code
                : ''}
              ]
            </span>
          </div>
          <div className={styles.bannerText}>
            <p className={styles.bannerTitle}>金眼，上市公司市值风险预警</p>
            <p className={styles.bannerDesc}>风险预警/分析评价/市值管理/舆情服</p>
          </div>

          <div className="gdHeaderRightBox">
            <div>
              <Menu
                onClick={this.handleClick}
                selectedKeys={[this.state.current]}
                mode="horizontal"
                // theme={theme}
                className={styles.gdHeaderRight}
              >
                {ConfigMenu.map((item, index) => {
                  if (item.children) {
                    return (
                      <SubMenu
                        key={item.name}
                        title={
                          <div>
                            <IconFont style={{ fontSize: '2em', margin: '0' }} type={item.icon} />
                            <p
                              style={{
                                textAlign: 'center',
                                fontSize: '12px',
                                color: '#fff',
                                margin: '0',
                                lineHeight: '12px',
                              }}
                            >
                              {item.name}
                            </p>
                          </div>
                        }
                      >
                        {/* <MenuItemGroup title={item.name}> */}
                        {item.children.map((citem, i) => {
                          return (
                            <Menu.Item key={citem.name}>
                              {citem.name}
                              <Link to={citem.path} />
                            </Menu.Item>
                          );
                        })}
                        {/* </MenuItemGroup> */}
                      </SubMenu>
                    );
                  } else {
                    return (
                      <Menu.Item key={item.name}>
                        <Link to={item.path}>
                          <IconFont
                            type={item.icon}
                            style={{ fontSize: '2em', marginRight: '0' }}
                          />
                          <p
                            style={{
                              textAlign: 'center',
                              fontSize: '12px',
                              color: '#fff',
                              margin: '0',
                              lineHeight: '12px',
                            }}
                          >
                            {item.name}
                          </p>
                        </Link>
                      </Menu.Item>
                    );
                  }
                })}
              </Menu>
              <div className={styles.er}>
                <div className={styles.erimg}>
                  <img src="./assets/Android.png" width={80} />
                  <p className={styles.erText}>安卓下载</p>
                </div>
                <div className={styles.erimg}>
                  <img src="./assets/ios.png" width={80} />
                  <p className={styles.erText}>ios下载</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className={styles.gdHeaderBottom}>
          {/* <div style={{ maxWidth }}> */}
          <div className={styles.gdHeaderMid}>
            <BaseMenu {...this.props} />
          </div>
          {/* </div> */}
        </div>
      </div>
      // <div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
      //   <div
      //     ref={ref => {
      //       this.maim = ref;
      //     }}
      //     className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
      //   >
      //     <div className={styles.left}>
      //       <div className={styles.logo} key="logo" id="logo">
      //         <Link to="/">
      //           <img src={logo} alt="logo" />
      //           <h1>舆情3.0</h1>
      //         </Link>
      //       </div>
      //       <div
      //         style={{
      //           maxWidth,
      //         }}
      //       >
      //         <BaseMenu {...this.props} style={{ border: 'none', height: 64 }} />
      //       </div>
      //     </div>
      //     <RightContent {...this.props} />
      //   </div>
      // </div>
    );
  }
}
